Создание сайта для поставщика судового оборудования

Мы в RedKrab любим помогать клиентам из сложных на первый взгляд сфер: промышленности, медицины, образования. Один из главных принципов нашей работы, который позволяет разрабатывать сайты, приносящие бизнесу пользу, — это детальное погружение в специфику клиента.
Только глубоко изучив особенности и потребности компании, для нее можно разработать сайт, решающий все поставленные клиентом задачи. Кейс по созданию сайта для поставщика судового оборудования “М-ТЕХ” наглядно демонстрирует целесообразность такого подхода.

6 Main Screen

Клиент и задачи

Клиент

Петербургская компания "М-ТЕХ" занимается комплексным техническим снабжением морских судов и шельфовых буровых установок. Они поставляют и обслуживают европейское оборудование, необходимое судам для нефте- и газодобычи: насосы, опреснители, компрессоры и пр. В каталоге "М-ТЕХ" представлено 14 категорий оборудования, и в каждой категории есть выбор по надежным брендам. “М-ТЕХ” располагается в Санкт-Петербург, но поставляет оборудование по всей России.

Задачи

Клиент пришел к нам за созданием сайта для самопрезентации. Компании было важно детально и понятно рассказать о специфике своей деятельности и наглядно показать весь перечень оказываемых услуг. “М-ТЕХ” не стремились организовать продажи через сайт, намного важнее было создать удобный информационный портал со всей информацией о компании в одном месте. Клиент регулярно участвует в профессиональных выставках, и информативный сайт был необходим в том числе для демонстрации потенциальным партнерам на подобных ивентах.

Что было

У “М-ТЕХ” уже был сайт, но его функционал не мог решить задачи бизнеса. Многие разделы оставались незаполненными, дизайн не отражал деятельность компании и не выделялся среди конкурентов. Посетителям и даже сотрудникам компании было сложно ориентироваться на сайте и находить нужную информацию.

Обсудив вводные данные, мы вместе с клиентом пришли к пониманию, что быстрее, выгоднее и эффективнее будет не исправлять старый сайт, а сделать новый с нуля и сразу учесть в нем все пожелания.

6.1 Old Site

Проектирование

Перед тем, как перейти к проектированию, мы изучили рынок, в связи с чем «М-ТЕХ», проверили сайты участников и проанализировали целевую аудиторию. На эту тему созвонились с клиентами, которые помогли нам углубиться в тонкости их отрасли, рассказали про основных партнеров и передали пожелания к сайту.

Например, клиенту было важно, чтобы посетитель мог сразу увидеть весь ассортимент брендов для каждой категории. Забегая вперед, можно предположить, что это пожелание было реализовано с помощью несложной анимации, благодаря тому, что при переходе на режим оборудования сразу же обнаруживается широкий спектр доступных брендов.

Еще «М-ТЕХ» хотел, чтобы сайт выполнял роль подробной визитки, поэтому мы уделили особое внимание описанию деятельности компании, ее владельцев и партнеров.

Работа на вероятном сайте поставщика судового оборудования была максимально понятной и прозрачной для клиента, мы составили план действий и совместно согласовали его. Определились со всеми необходимыми страницами сайта, согласовали структуру и основной функционал, а затем приступили к работе.

На основе полученной информации мы обнаружили MoodBoard — графическую презентацию, которая отражает основное и настроение будущего сайта: предполагаемые стиль цвета и шрифты. Заказчику понравилась выбранная стилистика, и после небольших доработок мы приступили к предполагаемому прототипу сайта поставщика судового оборудования.

Создание прототипа

Мы проработали 4 отдельные страницы: Главная, О компании, Контакты и типовая страница Категории товаров.

  • Главная страница знакомит посетителей с компанией, позволяет сразу просмотреть каталог услуг, познакомиться с определенным этапом работы и перечнем партнеров. 
  • На странице «О компании» посетители более подробно узнали о поставщике судового оборудования «М-ТЕХ» и его преимуществах.
  • В разделе заседаний — основные вопросы, связанные с регистрацией и формой для заявок.
  • Так как каждая позиция в каталоге имеет несколько категорий, мы решили разработать один типоразмерный вариант страницы, в котором впоследствии можно просто изменить текст и изображение. Шаблон такой страницы включает в себя описание и список с брендами, при необходимости пользователь может развернуть и прочитать описание каждого из них.

Так как большая задача имеет место в отношении презентаций сайта, мы с вниманием отнеслись к мышечным массам, чтобы дать посетителям пищевую информацию. Также проработали форму обратной связи, которая позволяет быстро оставить заявку.

Прототип

Дизайн

В «М-ТЕХ» был ряд пожеланий по дизайну: они хотели призвать морскую тематику и сохранить синий цвет, но при этом не переназначают сайт банальных явлений в виде кораблей и волн. Кроме того, у клиентов уже был готовый логотип, который необходимо было интегрировать в дизайн. 

Мы проверили несколько вариантов и в конечном итоге оказались на темной версии, которая выглядела наиболее эффектно. 

Дизайн не перегружен лишними пятнами, имеет акцентный голубой цвет и легкие подложки, которые придают эффект градиента. Также мы добавили на сайт ненавязчивую его анимацию, чтобы сделать ее более динамичной. Еще интереснее сделать дизайн небольших деталей — например, использование логотипа в виде фонового изображения. 

6.5 Page Design Pc Others

Адаптивность

Для каждой страницы мы разработали мобильную версию. На сайте отзывчивый дизайн, который корректно отображается в любых современных браузерах, на экранах ПК, ноутбуков, смартфонов.

6.4 Main Page

Кому будет полезно

Кейс по выбору сайта для широкого круга судового предприятия будет обществом из редких, которые рассматриваются как частные и малопонятные для широких масс. У нашей компании есть богатый опыт работы с привлечением внимания клиентов и привлечением внимания к их презентациям на сайте. Хорошо проработанный и исходный сайт выделит среди участников и повысит статус компании. 

6 Page Design Mobile All

НУЖЕН ИМИДЖЕВЫЙ САЙТ?

Звоните: консультируем и рассчитываем стоимость проекта бесплатно!